import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import { colorGuide, mainColors } from '../../primitives';
import Tag from '.';

<Meta title="Components/Tags" component={Tag} />

# Tag

export const TagTemplate = (args) => <Tag {...args} />;

export const tagArgTypes = {
    children: {
        description: 'Tag keyword',
        default: null,
        type: {
            required: true,
        },
    },
    colorConfig: {
        description: 'Tag color config',
        default: null,
        type: {
            required: true,
        },
    },
    noContainer: {
        description: 'Tag without container?',
        default: false,
    },
    icon: {
        description: 'Tag with icon source',
        type: {
            required: false,
        },
        control: {
            type: 'text',
        },
    },
};

Tag component is used to label, categorize or organize data using keywords.

<Canvas>
    <Tag colorConfig={colorGuide.darkComponents.tags.error}>Error (dark)</Tag>
    <Tag colorConfig={colorGuide.lightComponents.tags.info} noContainer>
        Info (no container)
    </Tag>
    <Tag colorConfig={colorGuide.lightComponents.tags.warning}>Warning (light)</Tag>
    <Tag colorConfig={colorGuide.darkComponents.tags.success}>Success (dark)</Tag>
    <Tag
        colorConfig={colorGuide.lightComponents.tags.info}
        icon="https://pngroyale.com/wp-content/uploads/2021/12/Download-blue-information-icon-Free-PNG-300x300.png"
    >
        Info with icon
    </Tag>
</Canvas>

## Usage

```jsx
import { Tag } from '@cred/neopop-web/lib/components';
import { mainColors } from '@cred/neopop-web/lib/primitives';

const TagUsage = () => {
    return (
        <Tag colorConfig={{ color: mainColors.blue, background: mainColors.white }}>
            DEAL OF THE DAY
        </Tag>
    );
};

export default TagUsage;
```

## Variants

<br />

### Success

<Canvas>
    <Story
        name="Success"
        args={{
            children: 'Successful',
            colorConfig: colorGuide.lightComponents.tags.success,
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

### Info With Icon

<Canvas>
    <Story
        name="Info"
        args={{
            children: 'Know more',
            colorConfig: colorGuide.lightComponents.tags.info,
            icon: 'https://pngroyale.com/wp-content/uploads/2021/12/Download-blue-information-icon-Free-PNG-300x300.png',
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

### Error

<Canvas>
    <Story
        name="Error"
        args={{
            children: 'Overdue',
            colorConfig: colorGuide.darkComponents.tags.error,
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

### Warning

<Canvas>
    <Story
        name="Warning"
        args={{
            children: 'Processing',
            colorConfig: colorGuide.lightComponents.tags.warning,
            noContainer: false,
        }}
        argTypes={tagArgTypes}
    >
        {TagTemplate.bind({})}
    </Story>
</Canvas>

## Props

<div style={{overflowX: 'auto'}}>

| name          | description                        | type                              |
| ------------- | ---------------------------------- | --------------------------------- |
| `children*`   | tag keyword                        | `string`                          |
| `colorConfig` | tag color config                   | `object`                          |
| `icon`        | tag with icon source               | `string`                          |
| `noContainer` | tag without container              | `boolean`                         |
| `colorMode`   | dark or light                      | `string`                          |
| `textStyle`   | can be used for passing font style | `object - FontNameSpaceInterface` |

</div>

**colorConfig**

<div style={{overflowX: 'auto'}}>

| name         | description      | type   |
| ------------ | ---------------- | ------ |
| `color`      | text color       | string |
| `background` | background color | string |

</div>

**FontNameSpaceInterface**

<div style={{overflowX: 'auto'}}>

| prop            | description        | type                                       |
| --------------- | ------------------ | ------------------------------------------ |
| `fontType*`   | typography variant | `heading`, `caps`, `body`, `serif-heading` |
| `fontWeight*` | weight of the text | `800`, `700`, `600`, `500`, `400`, `300`   |
| `fontSize*` | size of the text   | `string`                                   |

</div>
